<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		:root {
			--w: 150px;
		}
		.container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			perspective: 2000px;
			/* transform-style: preserve-3d; */
		}

		.cube-box {
			list-style: none;
			position: relative;
			width: var(--w);
			height: var(--w);
			transform: rotateX(-30deg) rotateY(-45deg);
			transform-style: preserve-3d;	
			user-select: none;
			transition: 3s;
			/* animation: spin 3s infinite linear; */
		}

		.cube-box li {
			position: absolute;
			width: var(--w);
			height: var(--w);
			background-color: #1e3e98;
			border: 1px solid #fff;
			text-align: center;
			line-height: var(--w);
			font-size: 20px;
			color: #fff;
		}

		.front {
			background-color: #f00;
			transform: translateZ(calc(var(--w) / 2));
		}

		.back {
			background-color: #0f0;
			transform: rotateY(180deg) translateZ(calc(var(--w) / 2));
		}

		.right {
			background-color: #00f;
			transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
		}

		.left {
			background-color: #ff0;
			transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
		}

		.top {
			background-color: #f0f;
			transform: rotateX(90deg) translateZ(calc(var(--w) / 2));
		}

		.bottom {
			background-color: #888;
			transform: rotateX(-90deg) translateZ(calc(var(--w) / 2));
		}
		.container .line {
			position: absolute;
			z-index: 999;
			width: calc(var(--w) * 1.5);
			height: 1px;
			background-color: #000;
			transform-style: preserve-3d;
			perspective: 2000px;
		}
		.x {
			transform: rotateZ(-30deg) translateX(-110px);
		}
		.y {
			transform: rotateZ(30deg) translateX(110px);
		}
		.z {
			transform: rotateZ(-90deg) translateX(110px);
		}
		/* @keyframes spin {
			from { transform: rotateX(0) rotateY(0); }
			to { transform: rotateX(-360deg) rotateY(-360deg); }
		} */
	</style>
	<body>
		<div class="container">
			<ul class="cube-box">
				<li class="front"></li>
				<li class="back"></li>
				<li class="left"></li>
				<li class="right"></li>
				<li class="top"></li>
				<li class="bottom"></li>
			</ul>
			<p class="line x"></p>
			<p class="line y"></p>
			<p class="line z"></p>
		</div>
	</body>
	<script>
		const { rotateX, rotateY, rotateZ } = Object.fromEntries(new URLSearchParams(location.search));
		const cubeBox = document.querySelector(".cube-box");
		setTimeout(() => {
			cubeBox.setAttribute('style', `
				transform: rotateX(${-30 + (Number(rotateX) || 0)}deg) rotateY(${-45 + (Number(rotateY) || 0)}deg) rotateZ(${Number(rotateZ) || 0}deg);
			`);
		}, 500)
		console.log(cubeBox.style.transform);
	</script>
</html>